<template>
  <div class="follow body">
    <div class="页眉">
    </div>


    <!--分栏-->
    <el-row :gutter="16" type="flex" justify="center">
      <!--菜单栏-->
      <el-col :span="4">
        <div class="文本框" style="height: 900px;">
          <el-menu  router>
            <el-menu-item index="/CreationCenter" >
              <div class="文本">
                <i class="el-icon-menu"></i>
                首页
              </div>
            </el-menu-item>
            <el-submenu index="001">
              <template slot="title">
                <div class="文本">
                  <i class="el-icon-edit-outline"></i>
                  创作
                </div>
              </template>
              <el-menu-item index="/CreationCenter/SendArticle">发布文章</el-menu-item>
              <el-menu-item index="/CreationCenter/SendVideo">发布视频</el-menu-item>
              <el-menu-item index="/CreationCenter/SendReport">发布研报</el-menu-item>
              <el-menu-item index="/CreationCenter/SendTinyArticle">发布富微条</el-menu-item>
            </el-submenu>
            <el-menu-item index="/CreationCenter/ManageArticle">
              <div class="文本">
                <i class="el-icon-reading"></i>
                作品管理
              </div>
            </el-menu-item>
            <el-submenu index="002">
              <template slot="title">
                <div class="文本">
                  <i class="el-icon-view"></i>
                  互动管理
                </div>
              </template>
              <el-menu-item index="/CreationCenter/ManageFollow">关注管理</el-menu-item>
              <el-menu-item index="/CreationCenter/ManageComment">评论管理</el-menu-item>
              <el-menu-item index="/CreationCenter/ManagePM">私信管理</el-menu-item>
            </el-submenu>
            <el-submenu index="003">
              <template slot="title">
                <div class="文本">
                  <i class="el-icon-document"></i>
                  数据分析
                </div>
              </template>
              <el-menu-item index="/CreationCenter/DataArticle">作品数据</el-menu-item>
              <el-menu-item index="/CreationCenter/DataFans">粉丝数据</el-menu-item>
              <el-menu-item index="/CreationCenter/DataProfit">收益数据</el-menu-item>
            </el-submenu>
            <el-menu-item index="/CreationCenter/Option">
              <div class="文本">
                <i class="el-icon-setting"></i>
                设置
              </div>
            </el-menu-item>
          </el-menu>
        </div>
      </el-col>
      <!--正文栏-->
      <el-col :span="14">
        <div class="文本框">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/CreationCenter' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>收益数据</el-breadcrumb-item>
          </el-breadcrumb>
          <br/>

          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane>
              <span slot="label" style="font-size: 18px">整体收益</span>
              <div class="文本 右侧" style="padding-top: 9px;">
                每日24:00更新昨日收益
              </div>
              <div class="文本框 居中">
                <div class="文本 居中">
                  可提现(元)
                </div>
                <div class="文本-巨型 居中">
                  {{ totalRevenue }}
                </div>
              </div>
              <div class="居中">
                <el-button type="primary">前往提现</el-button>
              </div>
              <br/>
              <el-row>
                <el-col :span="12">
                  <div class="文本-大" style="margin-top: 10px; margin-bottom: 20px;">流量分析</div>
                </el-col>
                <el-col :span="12" class="右侧">
                  <el-select v-model="defaultOption" placeholder="">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
              </el-row>
              <div id="total" style="width: 1000px; height:400px;"></div>
              <br/>
              <div class="文本-大" style="margin-top: 10px; margin-bottom: 20px;">收益详情</div>
              <el-table
                  :data="_7DayRevenueDetail"
                  style="width: 100%">
                <el-table-column
                    prop="date"
                    label="日期"
                    width="300">
                </el-table-column>
                <el-table-column
                    prop="totalRevenue"
                    label="总计"
                    width="100"
                    align="center"
                    fixed="right">
                </el-table-column>
                <el-table-column
                    prop="promotionRevenue"
                    label="推广收益"
                    width="100"
                    align="center"
                    fixed="right">
                </el-table-column>
                <el-table-column
                    prop="creationRevenue"
                    label="创作收益"
                    width="100"
                    align="center"
                    fixed="right">
                </el-table-column>
                <el-table-column
                    prop="liveRevenue"
                    label="直播收益"
                    width="100"
                    align="center"
                    fixed="right">
                </el-table-column>
              </el-table>

            </el-tab-pane>
            <el-tab-pane>
              <span slot="label" style="font-size: 18px">创作收益</span>
              <div class="文本 右侧" style="padding-top: 9px;">
                每日24:00更新昨日收益
              </div>
              <div class="文本框 居中">
                <div class="文本 居中">
                  昨日收益(元)
                </div>
                <div class="文本-巨型 居中">
                  {{yesterdayCreationRevenue}}
                </div>
              </div>
              <div class="文本框 居中">
                <div class="文本 居中">
                  总收益(元)
                </div>
                <div class="文本-巨型 居中">
                  {{ totalCreationRevenue }}
                </div>
              </div>
              <el-row>
                <el-col :span="12">
                  <div class="文本-大" style="margin-top: 10px; margin-bottom: 20px;">流量分析</div>
                </el-col>
                <el-col :span="12" class="右侧">
                  <el-select v-model="defaultOption" placeholder="">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
              </el-row>
              <div id="write" style="width: 1000px; height:400px;"></div>
              <br/>
              <div style="padding-top: 10px;padding-top: 10px">
                <div id="main" style="width: 1000px; height:400px;"></div>
              </div>
              <br/>
              <div class="文本-大" style="margin-top: 30px; margin-bottom: 20px;">单篇作品收益</div>
              <el-table
                  :data="articleCreationRevenueDetails"
                  style="width: 100%">
                <el-table-column
                    prop="title"
                    label="作品"
                    align="left">
                </el-table-column>
                <el-table-column
                    prop="revenue"
                    label="累计获利"
                    width="400"
                    align="right">
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane>
              <span slot="label" style="font-size: 18px">推广收益</span>
              <div class="文本 右侧" style="padding-top: 9px;">
                每日24:00更新昨日收益
              </div>
              <div class="文本框 居中">
                <div class="文本 居中">
                  昨日收益(元)
                </div>
                <div class="文本-巨型 居中">
                  {{yesterdayPromotionRevenue}}
                </div>
              </div>
              <div class="文本框 居中">
                <div class="文本 居中">
                  总收益(元)
                </div>
                <div class="文本-巨型 居中">
                  {{ totalPromotionRevenue }}
                </div>
              </div>
              <el-row>
                <el-col :span="12">
                  <div class="文本-大" style="margin-top: 10px; margin-bottom: 20px;">流量分析</div>
                </el-col>
                <el-col :span="12" class="右侧">
                  <el-select v-model="defaultOption" placeholder="">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
              </el-row>
              <div id="spread" style="width: 1000px; height:400px;"></div>
              <div class="文本-大" style="margin-top: 30px; margin-bottom: 20px;">单篇作品收益</div>
              <el-table
                  :data="articlePromotionRevenueDetails"
                  style="width: 100%">
                <el-table-column
                    prop="title"
                    label="作品"
                    align="left">
                </el-table-column>
                <el-table-column
                    prop="revenue"
                    label="累计获利"
                    width="400"
                    align="right">
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane>
              <span slot="label" style="font-size: 18px">直播收益</span>
              <div class="文本 右侧" style="padding-top: 9px;">
                每日24:00更新昨日收益
              </div>
              <div class="文本框 居中">
                <div class="文本 居中">
                  昨日收益(元)
                </div>
                <div class="文本-巨型 居中">
                  {{yesterdayLiveRevenue}}
                </div>
              </div>
              <div class="文本框 居中">
                <div class="文本 居中">
                  总收益(元)
                </div>
                <div class="文本-巨型 居中">
                  {{ totalLiveRevenue }}
                </div>
              </div>
              <el-row>
                <el-col :span="12">
                  <div class="文本-大" style="margin-top: 10px; margin-bottom: 20px;">流量分析</div>
                </el-col>
                <el-col :span="12" class="右侧">
                  <el-select v-model="defaultOption" placeholder="">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
              </el-row>
              <div id="other" style="width: 1000px; height:400px;"></div>
              <div class="文本-大" style="margin-top: 30px; margin-bottom: 20px;">单篇作品收益</div>
              <el-table
                  :data="liveRevenueDetails"
                  style="width: 100%">
                <el-table-column
                    prop="title"
                    label="作品"
                    align="left">
                </el-table-column>
                <el-table-column
                    prop="revenue"
                    label="累计获利"
                    width="400"
                    align="right">
                </el-table-column>
              </el-table>
            </el-tab-pane>
            </el-tabs>




        </div>

      </el-col>

    </el-row>



    <div class="页眉">
    </div>


  </div>
</template>

<style>
.deleteBorder .el-tabs__nav-wrap::after{
  height: 0;
}
/*去掉el-tab-pane切换时的蓝色下划线*/
.deleteBorder .el-tabs__active-bar{
  background: transparent;
}
</style>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      activeName: '0',
      activeName_2: '0',
      activeName_3: '1',
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",

      total: 100,
      pageSize: 10,
      current: 3,

      fansTable: [
          {
        name: '麦克',
        rela: '嘿嘿',
        mark: '3',
        flag: '1',
        url: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"
      }, {
        name: '麦1克',
        rela: '嘿嘿',
        mark: '1',
        flag: '1',
        url: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"
      }, {
        name: '麦克',
        rela: '嘿嘿',
        mark: '4',
        flag: '1',
        url: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"
      }, {
        name: '麦克',
        rela: '嘿嘿',
        mark: '2',
        flag: '1',
        url: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"
      }],
      options: [
          {
        value: '001',
        label: '7天'
      }, {
        value: '002',
        label: '30天'
      }],
      defaultOption: '001',
      file_num :4,
      queryByUserIdAndDate:{
        idUser: window.sessionStorage.getItem("idUser"),
        date:'2021-05-28 16:23:11',
      },
      totalRevenue:0,
      _7DayRevenueDetail:[],
      _30DayRevenue:[],
      totalCreationRevenue:0,
      _30DayCreationRevenue:[],
      yesterdayCreationRevenue:0,
      _30DayFuheadlineCreationRevenue:[],
      _30DayVideoCreationRevenue:[],
      _30DayArticleCreationRevenue:[],
      articleCreationRevenueDetails:[],
      videoCreationRevenueDetails:[],
      fuheadlineCreationRevenueDetails:[],
      totalPromotionRevenue: 0,
      _30DayPromotionRevenue:[],
      yesterdayPromotionRevenue:0,
      articlePromotionRevenueDetails:[],
      videoPromotionRevenueDetails:[],
      fuheadlinePromotionRevenueDetails:[],
      livePromotionRevenueDetails:[],
      totalLiveRevenue: 0.8,
      _30DayLiveRevenue: [],
      yesterdayLiveRevenue:0,
      liveRevenueDetails: [],

        }
  },
  created() {
    this.getTotalRevenue()
    this.getCreationRevenue()
    this.getPromotionRevenue()
    this.getLiveRevenue()
  },
  methods: {
    async getTotalRevenue() {
      const {data: res} = await this.$http.get('http://39.102.77.65:8088/user/gettotalrevenue', {
        params:this.queryByUserIdAndDate
      })
      this.totalRevenue=res.totalRevenue
      this._7DayRevenueDetail=res['7DayRevenueDetail'].reverse()
      this._30DayRevenue=res['30DayRevenue'].reverse()
      var chartDom = document.getElementById('total');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['总计']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [30,29,28,27,26,25,24,23,22,21,20,19,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1]
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '总体收益',
            type: 'line',
            stack: '1',
            data: this._30DayRevenue
          }
        ]
      };
      option && myChart.setOption(option);
      console.log(res)
    },
    handleCurrentChange(newPage){
      console.log(newPage)
      this.current=newPage
    },
    async getCreationRevenue() {
      const {data: res} = await this.$http.get('http://39.102.77.65:8088/user/getcreationrevenue', {
        params:this.queryByUserIdAndDate
      })
      this.totalCreationRevenue=res.totalCreationRevenue
      this._30DayCreationRevenue=res["30DayCreationRevenue"].reverse()
      this.yesterdayCreationRevenue=this._30DayCreationRevenue[29],
      this._30DayFuheadlineCreationRevenue=res["30DayFuheadlineCreationRevenue"].reverse()
      this._30DayVideoCreationRevenue=res["30DayVideoCreationRevenue"].reverse()
      this._30DayArticleCreationRevenue=res["30DayArticleCreationRevenue"].reverse()
      this.articleCreationRevenueDetails=res.articleCreationRevenueDetails
      this.videoCreationRevenueDetails=res.videoCreationRevenueDetails
      this.fuheadlineCreationRevenueDetails=res.fuheadlineCreationRevenueDetails
      var chartDom2 = document.getElementById('write');
      var myChart2 = echarts.init(chartDom2);
      var option2;

      option2 = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['总计']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [30,29,28,27,26,25,24,23,22,21,20,19,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1]
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '总体',
            type: 'line',
            stack: '1',
            data: this._30DayCreationRevenue
          }
        ]
      };
      option2 && myChart2.setOption(option2);

      var chartDom5 = document.getElementById('main');
      var myChart5 = echarts.init(chartDom5);
      var option5;

      option5 = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['文章', '富微条', '视频']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [30,29,28,27,26,25,24,23,22,21,20,19,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1]
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '文章',
            type: 'line',
            stack: '1',
            data: this._30DayArticleCreationRevenue
          },
          {
            name: '富微条',
            type: 'line',
            stack: '2',
            data: this._30DayFuheadlineCreationRevenue
          },
          {
            name: '视频',
            type: 'line',
            stack: '4',
            data: this._30DayVideoCreationRevenue
          }
        ]
      };
      option5 && myChart5.setOption(option5);
      console.log(res)
    },
    async getPromotionRevenue() {
      const {data: res} = await this.$http.get('http://39.102.77.65:8088/user/getpromotionrevenue', {
        params:this.queryByUserIdAndDate
      })
      this.totalPromotionRevenue=res.totalPromotionRevenue
      this._30DayPromotionRevenue=res['30DayPromotionRevenue'].reverse()
      this.yesterdayPromotionRevenue=this._30DayPromotionRevenue[29],
      this.articlePromotionRevenueDetails=res.articlePromotionRevenueDetails
      this.videoPromotionRevenueDetails=res.videoPromotionRevenueDetails
      this.fuheadlinePromotionRevenueDetails=res.fuheadlinePromotionRevenueDetails
      this.livePromotionRevenueDetails=res.livePromotionRevenueDetails

      var chartDom3 = document.getElementById('spread');
      var myChart3 = echarts.init(chartDom3);
      var option3;

      option3 = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['总计']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [30,29,28,27,26,25,24,23,22,21,20,19,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1]
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '总体',
            type: 'line',
            stack: '1',
            data: this._30DayPromotionRevenue
          }
        ]
      };
      option3 && myChart3.setOption(option3);
      console.log(res)
    },
    async getLiveRevenue() {
      const {data: res} = await this.$http.get('http://39.102.77.65:8088/user/getliverevenue', {
        params:this.queryByUserIdAndDate
      })
      //this.totalPromotionRevenue=res.totalPromotionRevenue
      this.totalLiveRevenue=res.totalLiveRevenue
      this._30DayLiveRevenue=res['30DayLiveRevenue'].reverse()
      this.yesterdayLiveRevenue=this._30DayLiveRevenue[29],
      this.liveRevenueDetails=res.liveRevenueDetails
      var chartDom4 = document.getElementById('other');
      var myChart4 = echarts.init(chartDom4);
      var option4;
      option4 = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['总计']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data:  [30,29,28,27,26,25,24,23,22,21,20,19,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1]
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '总体',
            type: 'line',
            stack: '1',
            data: this._30DayLiveRevenue
          }
        ]
      };
      option4 && myChart4.setOption(option4);
      console.log(res)
    },
  },

  mounted() {



















  },
};
</script>